<!--
 * @Description: 
 * @Author: ZachGmy
 * @Date: 2025-04-11 14:00:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2025-07-22 16:29:46
-->
<template>
  <div>
    <!-- 设置标题 -->
    <Title title="设备状态分布"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="left2" style="height: 150px; margin-top: 15px"></div>
  </div>
</template>

<script>
import { Pie } from "@antv/g2plot";
import { get } from "@/utils/request";

export default {
  data() {
    return {
      devArr: [],
    };
  },
  async mounted() {
    await this.getDevData();
    await this.initLeft2();
  },
  methods: {
    initLeft2() {
      const piePlot = new Pie(this.$refs.left2, {
        appendPadding: 10,
        data: this.devArr,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        label: {
          type: "outer",
        },
        legend: {
          position: "right", // 确保图例在右侧
          itemName: {
            style: {
              fill: "#ffffff", // 设置文字颜色为白色
              fontSize: 12, // 可选：设置文字大小
            },
          },
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();
    },
    async getDevData() {
      let devData = await get("/count/countAll");
      // console.log(devData.data);
      this.devArr = devData.data;
    },
  },
};
</script>

<style lang="scss" scoped></style>
